<template>
  <div>
    <el-table
      border
      ref="studentTable"
      :data="propsTableData"
      style="width: 100%"
      highlight-current-row
      stripe
    >
      <el-table-column
        v-for="(item, index) in tableField"
        :key="index"
        :label="item.label"
        align="center"
      >
        <template #default="scope">
          <div v-if="item.value == 'index'">
            {{ scope.$index + 1 }}
          </div>
          <div
            v-else-if="item.value == 'fileName' && scope.row.fileNameNum > 0"
            target="_blank"
            class="link-div"
            @click="handleLink(scope.$index)"
          >
            {{ propsTableData[scope.$index].fileNameNum }}个附件
          </div>
          <el-link
            v-else-if="item.value == 'documentName'"
            :href="propsTableData[scope.$index].filePath"
            target="_blank"
            >{{ propsTableData[scope.$index].fileName }}</el-link
          >
          <div v-else-if="item.value == 'documentNature'">
            {{
              documentNatureList.find(
                item => item.id == propsTableData[scope.$index].documentNature
              ).name
            }}
          </div>

          <div v-else>
            {{ propsTableData[scope.$index][item.value] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      v-if="tableName == '附件资料'"
      style="width: 100%"
      class="el-icon-circle-plus-outline"
      @click="handleDownload()"
    >
      一键下载
    </el-button>
  </div>
</template>

<script setup name="detailYgdaTable">
import { computed, getCurrentInstance, reactive, toRefs } from 'vue'
import { getEmployeeFilesBatch } from '@/api/rsgl/ygda'
const { proxy } = getCurrentInstance()
const props = defineProps({
  tableField: Array,
  tableData: {
    type: Array
  },
  tableName: String
})
const data = reactive({
  propsTableData: [],
  //文档性质
  documentNatureList: [
    {
      id: 'tb_employee_study',
      name: '学习经历'
    },
    {
      id: 'tb_employee_contract',
      name: '合同信息'
    },
    {
      id: 'tb_employee_certificate',
      name: '取得证书'
    },
    {
      id: 'tb_employee_work',
      name: '工作经历'
    }
  ]
})
const { propsTableData, documentNatureList } = toRefs(data)
watch(
  () => props.tableData,
  (newVal, oldValue) => {
    propsTableData.value = newVal
    console.info('newVal', newVal)
    console.info('oldValue', oldValue)
    console.info('propsTableData.value', propsTableData.value)
  },
  {
    deep: true
  }
)
console.info('props.tableData===', props.tableData, props.tableName)
const emit = defineEmits(['handleLink', 'handleDownload'])
//跳转
function handleLink(index) {
  const activeName = '8'
  console.log(
    '跳转=',
    index,
    propsTableData.value[index],
    props.tableName,
    activeName
  )
  emit(
    'handleLink',
    propsTableData.value[index].employeeId,
    propsTableData.value[index].id,
    props.tableName,
    index,
    activeName
  )
}
// 一键下载 传员工Id
function handleDownload() {
  console.log(' 一键下载', propsTableData.value, props.tableName)
  let source = ''
  if (props.tableName == '学习经历') {
    source = 'tb_employee_study'
  } else if (props.tableName == '合同信息') {
    source = 'tb_employee_contract'
  } else if (props.tableName == '取得证书') {
    source = 'tb_employee_certificate'
  }
  let documentNo = ''
  var data = JSON.parse(JSON.stringify(propsTableData.value))
  let flag = propsTableData.value[0].documentNo
  let cacheAry = data.filter(item => {
    return item.documentNo != flag
  })

  if (cacheAry.length > 0) {
    documentNo = ''
  } else {
    documentNo = flag
  }

  let document = {
    employeeId: propsTableData.value[0].employeeId,
    documentNature: source,
    documentNo: documentNo
  }
  proxy
    .$confirm('是否批量下载附件?', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    .then(() => {
      proxy.downLoadZip(
        '/system/document/files/download/batch',
        document,
        '附件资料下载.zip'
      )
    })

  //   emit('handleDownload')
}
</script>

<style style scoped lang="scss">
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #f5f7fa !important;
  color: #000018 !important;
}

::v-deep .el-table--border th,
::v-deep .el-table--border td {
  border-right: 1px solid #eee;
}
.link-div {
  cursor: pointer;
  color: #409eff;
  display: inline-block;
}
</style>
